<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON压缩工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        h1 {
            text-align: center;
            color: #333;
        }

        .container {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-family: monospace;
            font-size: 14px;
        }

        #compactOutput {
            background-color: #f5f5f5;
            white-space: pre-wrap;
            /* 支持软换行 */
            word-wrap: break-word;
            /* 长单词换行 */
            overflow-wrap: break-word;
            /* 现代浏览器 */
        }

        button {
            padding: 10px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        button:hover {
            background-color: #45a049;
        }

        .error {
            color: red;
            font-size: 14px;
            margin-top: 5px;
            display: none;
        }
    </style>
</head>

<body>
    <h1>JSON压缩工具</h1>
    <div class="container">
        <div>
            <label for="jsonInput">输入JSON数据（多行格式）:</label>
            <textarea id="jsonInput" rows="10" placeholder="在此粘贴JSON数据..."></textarea>
            <div id="errorMsg" class="error"></div>
        </div>

        <button id="compactBtn">压缩JSON</button>

        <div>
            <label for="compactOutput">压缩后的JSON（单行格式）:</label>
            <textarea id="compactOutput" rows="10" readonly></textarea>
        </div>

        <button id="copyBtn">复制压缩后的JSON</button>
    </div>

    <script>
        document.getElementById('compactBtn').addEventListener('click', function () {
            const jsonInput = document.getElementById('jsonInput').value;
            const errorMsg = document.getElementById('errorMsg');
            const outputArea = document.getElementById('compactOutput');

            // 重置错误信息
            errorMsg.style.display = 'none';

            try {
                // 尝试解析JSON
                const jsonObj = JSON.parse(jsonInput);

                // 将JSON转换为紧凑格式
                const compactJson = JSON.stringify(jsonObj);

                // 显示结果
                outputArea.value = compactJson;
            } catch (e) {
                // JSON解析失败
                errorMsg.textContent = `JSON格式错误: ${e.message}`;
                errorMsg.style.display = 'block';
                outputArea.value = '';
            }
        });

        document.getElementById('copyBtn').addEventListener('click', function () {
            const outputArea = document.getElementById('compactOutput');
            outputArea.select();
            document.execCommand('copy');
            alert('已复制到剪贴板');
        });
    </script>
</body>

</html>